<template>
	<view class="wrap">
		<Search @search-data="handleSearchData" :current="current" v-show="false" />
		<view class="navProgramm">
			<u-subsection :list="tabList" :current="current" @change="sectionChange"></u-subsection>
		</view>
		<scroll-view class="scroll-list" scroll-y="true">
			<view v-show="this.showList1">
				<u-card class="task-list-item" :show-head="false" :border="true" padding="24" margin="20rpx"
					:head-border-bottom="true" v-for="(item,index) in AlarmRealList" :key="item.id">
					<view slot="body">
						<u-row>
							<u-col span="12">
								<view class="apply-text"><span>点短名：</span>{{item.short_name}}</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>报警时间：</span>{{item.alarm_time}}</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>优先级：</span>{{item.alarm_priority}}</view>
							</u-col>
							<u-col span="12" class="demo-layout bg-purple-light">
								<view class="apply-text"><span>报警描述：</span>{{item.alarm_content}}</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>持续时间：</span>{{item.alarm_duration}} s</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>事件单号：</span>{{item.wh_declare_num}}</view>
							</u-col>
						</u-row>
					</view>
					<view @click="navTo1(item.id)" class="apply-list-foot" slot="foot" style="text-align: right;"
						v-if="createReport">事件申报</view>
				</u-card>
				<u-divider v-if="this.loading">已经到底了</u-divider>
				<u-divider v-else-if="!this.loading">正在加载中</u-divider>
			</view>
			<view v-show="this.showList2">
				<u-card class="task-list-item" :show-head="false" :border="true" padding="20" margin="20rpx"
					:head-border-bottom="false" v-for="(item,index) in ThingsList" :key="item.id">
					<view slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<view class="apply-text"><span>事件类型：</span>{{item.ft_fault_type}}</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>报警时间：</span>{{item.wh_declare_time}}</view>
							</u-col>
							<u-col span="12">
								<view class="apply-text"><span>关联位置：</span>{{item.eq_name}}</view>
							</u-col>
						</u-row>
					</view>
					<view @click="navTo(item.id)" class="apply-list-foot" slot="foot" style="text-align: right;">查看工单
					</view>
				</u-card>
				<u-divider>已经到底了</u-divider>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import Search from '@/components/headsearch/searchFalarm.vue'
	export default {
		components: {
			Search
		},
		props: {
			createReport: {
				type: Boolean,
				default: true
			},
			event: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: '',
				//厂站
				searchData: '', // 用于保存接收到的数据
				//报警类型
				alarmData: '',
				tabList: [{
						name: '实时报警'
					},
					{
						name: '事件报警'
					}
				],
				current: 0,
				showList1: true,
				showList2: false,
				//实时报警列表
				AlarmRealList: [],
				//事件报警列表
				ThingsList: [],
				priorityMap: {
					low: '初级',
					medium: '中级',
					high: '高级',
					highest: '紧急'
				},
				timer: null
			}
		},

		onShow() {
			// uni.showLoading();
			console.log('页面显示');
			this.startTimer();
		},
		onHide() {
			console.log('页面隐藏');
			this.stopTimer();
			// uni.hideLoading(); // 添加这行代码来隐藏加载状态
		},
		onUnload() {
			console.log('页面隐藏');
			this.stopTimer();
		},
		methods: {
			handleSearchData(data, alarm) {
				this.searchData = data; // 接收到子组件传递过来的数据
				this.alarmData = alarm; // 接收到子组件传递过来的数据
				this.getAlarmRealData();
				this.getWorkOrder();
			},
			startTimer() {
				this.timer = setInterval(() => {
					// 定时器执行的逻辑
					this.getAlarmRealData();
					// this.getWorkOrder();
				}, 3000);
			},
			stopTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			//跳转至事件工单列表
			navTo(id) {
				uni.navigateTo({
					url: "/pages/sys/eventwororder/eventorder/eventOrder"
				});
			},
			//跳转至新增申报页面
			navTo1(id) {
				uni.navigateTo({
					url: "/pages/sys/eventwororder/adddeclaration/adddeclaration?falarm_id=" + id
				});
			},
			//分段器回调
			sectionChange(index) {
				this.current = index;
				if (this.current == 0) {
					this.showList1 = true
					this.showList2 = false
				} else {
					this.showList1 = false
					this.showList2 = true
				}
				// console.log(this.current)
			},

			//实时报警列表
			getAlarmRealData() {
				const cachedData = uni.getStorageSync('cachedAlarmRealData');

				if (cachedData) {
					this.AlarmRealList = JSON.parse(cachedData);
					this.loading = true;
					return;
				}

				this.$u.api.getAlarmRealData({
					"algorithmProcessId": "getAlarmRealData",
					"param": {
						"data": {
							structure_uuid: uni.getStorageSync('navId'),
							alarm_priority: this.alarmData
						}
					},
				}).then(res => {
					this.AlarmRealList = res.data.data.result;
					this.AlarmRealList.forEach(item => {
						if (item.alarm_priority in this.priorityMap) {
							item.alarm_priority = this.priorityMap[item.alarm_priority];
						}
					});

					this.loading = true;
					uni.setStorageSync('cachedAlarmRealData', JSON.stringify(this.AlarmRealList));

				}).catch(error => {
					console.error(error);
				});
			},
			//事件报警列表
			getWorkOrder() {
				this.$u.api.getWorkOrder({
					"algorithmProcessId": "getWorkOrder",
					"param": {
						"data": {
							// structure_uuid: this.searchData,
							structure_uuid: uni.getStorageSync('navId')
						}
					}
				}).then(res => {
					this.ThingsList = res.data.data.result
				}).catch(error => {
					// this.$u.toast('查询');
					// console.error(error);
				});
			}
		},
	};
</script>
<style lang="scss">
	@import '../../../common/uni.css';
	@import 'style/index.css';
	
	
</style>